<template>
	<view class="unt-selfpoint-contanier">
		<view class="point-check-address" @click="pointChangeModel()">
			<u-icon name="map" size="20"></u-icon>
			<view class="addres-content">
				<view class="addres-detailed">{{data.address}}</view>
				<view class="contacts"><text class="name">{{data.name}}</text>
					<text class="tep">{{data.phone}}</text>
				</view>
			</view>
			<unt-icon name="icon-arrow" size="12" color="#01a601"></unt-icon>
		</view>
		<u-popup :show="show" @close="show=false" @open="show=true" closeable round='20'>
			<view class="point-list" v-if="list.length">
				<view class="item-addres-detail" v-for="(item,index) in list" :key="index" @click="handleCheck(item)">
					<view class="name">{{item.name}}</view>
					<view class="address">{{item.address}}</view>
				</view>
			</view>
			<!-- 空 -->
			<unt-empty type="address" v-else></unt-empty>
			<!-- 空 -->
		</u-popup>
	</view>
</template>

<script>
	import * as Addres from "@/api/addres/index.js"
	import prop from "./props.js"
	export default {
		name: "unt-self-point",
		mixins: [prop],
		data() {
			return {
				data: {
					address: "请选择自提地点！"
				},
				show: false,
				list: []
			};
		},
		watch: {
			pointDefaut: {
				immediate: true,
				handler(val) {
					if (val != null && !uni.$unt.isEmptyObject(val)) {
						this.data = val;
					}
				}
			}
		},
		methods: {
			handleCheck(item) {
				this.data = item;
				this.$emit('update:pointDefaut', item);
				this.$emit('update:selfPointId', item.selfPointId);
				this.show = false;
			},
			async pointChangeModel() {
				await this.getPointList();
				this.show = true;
			},
			getPointList() {
				const app = this;
				return new Promise(function(resolve, reject) {
					Addres.pointList({}).then(res => {
						app.list = res.data;
						resolve('true')
					}).catch(err => resolve(err))
				})
			}
		}
	}
</script>
<style>
	.unt-selfpoint-contanier .u-popup__content__close {
		padding: 15rpx;
		background: #fff;
		border-radius: 50%;
		box-shadow: 1px 1px 1px #e9ebed, -1px -1px 1px #e9ebed;
	}
</style>
<style lang="scss" scoped>
	.unt-selfpoint-contanier {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 9999;

		.point-check-address {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.addres-content {
				margin-left: 20rpx;

				.addres-detailed {
					font-size: 26rpx;
				}

				.contacts {
					font-size: 26rpx;
					color: #999;
				}
			}

			unt-icon {
				margin-left: auto;
			}
		}

		.point-list {
			max-height: 90vh;
			min-height: 60vh;
			overflow-y: auto;
			padding-top: 20px;
			padding: 50rpx 15rpx 15rpx 15rpx;

			.item-addres-detail {
				padding: 20rpx 25rpx;
				font-size: 28rpx;
				border-bottom: 1px solid #f5f5f5;

				.name {
					font-size: 28rpx;
					font-weight: bold;
				}

				.address {
					color: #999;
					font-size: 26rpx;
				}
			}
		}
	}
</style>